<template>
  <div class="operator">
    <Header title="运营商档案卡" />
    <Imgtext path="operatorWrite" />
    <div class="content">
      <div class="list_content" v-for="(item,index) in arr" :key="index">
        <h2></h2>
        <li>
          <span>手机号</span>
          <span>{{tel?tel:'未绑定'}}</span>
        </li>
        <li>
          <span>入网时间</span>
          <span>2011-09-05</span>
        </li>
        <li>
          <span>套餐类型</span>
          <span>--</span>
        </li>

        <li>
          <span>话费余额</span>
          <span>99.18元</span>
        </li>
        <li>
          <span>流量余额</span>
          <span>7903MB</span>
        </li>
        <li>
          <span>剩余通话时长</span>
          <span>89分钟</span>
        </li>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { mapState, mapMutations } from "vuex";
import Imgtext from "@/components/imgText.vue";
import Header from "@/components/header.vue";
export default Vue.extend({
  components: {
    Imgtext,
    Header,
  },
  computed: {
    ...mapState(["tel"]),
  },
  methods: {
    ...mapMutations(["setList"]),
  },
  mounted() {
    // let num = this.$refs.tel ? this.$refs.tel[0].innerHTML : "";
    // this.setList(num);
  },

  data() {
    return {
      arr: [
        {
          title: "",
          list: [
            {
              sub: "手机号",
              text: "",
            },
            {
              sub: "QQ",
              text: "28275912",
            },
            {
              sub: "微博",
              text: "syleka",
            },
            {
              sub: "邮箱",
              text: "411879121@qq.com",
            },
            {
              sub: "开心网",
              text: "411879121@qq.com",
            },
            {
              sub: "人人网",
              text: "18810588266",
            },
            {
              sub: "知乎",
              text: "411879121@qq.com",
            },
            {
              sub: "豆瓣",
              text: "18810588266",
            },
          ],
        },
      ],
    };
  },
});
</script>
<style scoped>
.list_content li span:nth-child(1) {
  width: 34%;
}
</style>